<template>
  <div class="dialog-main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人信息 " name="first" class="basicInfo">
        <div class="title">基本信息</div>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              姓名
              <span>邱霄</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              身份证
              <span>411504195502122233</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              年龄
              <span>男</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              性别
              <span>女</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              老人类型
              <span>低保老人</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              联系方式
              <span>15678432231</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              居住地址
              <span>信阳市平桥区恒大名都1号楼1019室</span>
            </p>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="服务信息 " name="second">
        <el-table
          :data="data1"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns1"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div v-if="activeName !== 'first'" class="searchTk">
      <el-row :gutter="20">
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
          <el-date-picker
            v-model="selectForm.startTime"
            value-format="timestamp"
            format="yyyy 年 MM 月 dd 日"
            placeholder="开始"
            size="mini"
            :picker-options="dataPickerBeforeTodayOptions"
            style="width: 180px;"
          ></el-date-picker>
          <span style="padding: 0 10px;">~</span>
          <el-date-picker
            v-model="selectForm.endTime"
            value-format="timestamp"
            format="yyyy 年 MM 月 dd 日"
            placeholder="结束"
            size="mini"
            :picker-options="dataPickerBeforeTodayOptions"
            style="width: 180px;"
          ></el-date-picker>
          &nbsp;
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            class="fr"
          >
            搜索
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index",
    components: {},
    props: {
      data: {
        type: Object,
        default() {
          return {
            face: "",
            backface: "",
            type: [],
          };
        },
      },
    },
    data() {
      return {
        activeName: "first",
        data1: [
          {
            time: "2020-03-15",
            heart: "正常",
            heartt: "正常",
            other: "正常",
            person: "杨超越",
          },
        ],
        tableColumns1: [
          { prop: "time", label: "服务时间" },
          { prop: "heart", label: "服务人员" },
          { prop: "heartt", label: "联系方式" },
          { prop: "other", label: "服务内容" },
          { prop: "person", label: "服务时长" },
        ],
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      console.log(JSON.stringify(this.data));
      if (JSON.stringify(this.data) !== "{}") {
        this.ruleForm = this.data;
        if (!this.data.type) {
          // this.$set(this.ruleForm, "type", []);
        }
      } else {
        console.log(111);
        // this.$refs.ruleForm.resetFields();
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(value) {
        console.log(value);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }

    .basicInfo {
    }

    .title {
      margin-bottom: 24px;
      font-size: 16px;
      color: #333;
    }

    .el-row {
      margin-bottom: 24px;

      .el-col {
        p {
          font-size: 16px;
          color: #999;

          span {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }

  .dialog-main {
    position: relative;

    .searchTk {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>
